<template>
  <div class="custom-filter">
    <div class="btn" @click="addSearch">
      <i
        style="font-size: 12px; color: #303753"
        class="V7_iconfont V7_iconV7tubiao_zidingyishaixuan"
      ></i
      >{{ name }}
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="500px"
      title="自定义筛选"
      @close="closeDialog"
    >
      <slot name="tip"></slot>
      <div class="box">
        <div class="left">
          <el-input
            v-model="search"
            prefix-icon="el-icon-search"
            style="margin-bottom: 10px"
            placeholder="搜索字段名称"
            clearable
            @input="handleSearch"
          ></el-input>
          <div style="height: 300px; overflow: auto">
            <div
              v-for="(item, index) in querySearchArr"
              :key="index"
              class="field"
            >
              <el-checkbox
                v-model="item.check"
                @change="chooseChange($event, item)"
                >{{ item.alias || item.name }}</el-checkbox
              >
            </div>
          </div>
        </div>
        <div class="right">
          <!-- 设置展示的行数 -->
          <!-- <div class="lines">
            收起时显示
            <el-select
              v-model="lines"
              placeholder="请选择层级"
              style="width: 100%"
            >
              <el-option
                :label="item"
                :value="item"
                v-for="item in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
                :key="item"
              ></el-option>
            </el-select>
            行查询条件
          </div> -->
          <div style="height: 100%; overflow: auto; padding: 20px 0">
            <draggable v-model="chooseFields" handle=".move">
              <div
                v-for="(item, index) in chooseFields"
                :key="index + 'model'"
                class="choose-field"
              >
                <div class="move" style="cursor: move" title="拖动排序">
                  <i class="V7_iconfont V7_iconV7tubiao_yidong"></i>
                </div>
                <div class="label">
                  {{ item.alias || item.name }}
                </div>
              </div>
            </draggable>
          </div>
        </div>
      </div>
      <div class="operation">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="saveFilter">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { deepClone } from '@/utils/common'
import { Component, Vue, Prop } from 'vue-property-decorator'
import draggable from 'vuedraggable'
@Component({
  name: 'CustomeFilter',
  components: { draggable }
})
export default class CustomeFilter extends Vue {
  [x: string]: any
  @Prop() private name // 按钮展示的名字
  @Prop() private filterId // 过滤器ID (客户模块)
  @Prop() private chooseData // 选中的搜索数据-再次进入页面展示的搜索项
  @Prop() private getCusAllFields // 全部搜索项
  @Prop({ default: false }) private newCus // 客户模块标识（用于特殊处理）
  private dialogVisible: boolean = false // 自定义搜索弹框展示开关

  private chooseFields: any = [] // 选中的搜索项

  private querySearchArr: any = [] // 展示的全部搜索项

  private search: any = '' // 搜索字段

  private lines: number = 1 // 展示行数---目前不展示

  private closeDialog () { // 关闭弹框-清空搜索条件
    this.search = ''
  }

  private saveFilter () { // 保存选中的搜索项
    this.dialogVisible = false // 关闭弹窗
    if (this.newCus) { // 客户模块特殊处理
      this.chooseFields.forEach(item => {
        if (item.alias) {
          item.name = item.alias
        }
      })
    }
    let sendData = {}
    if (this.newCus) { // 客户模块特殊处理
      sendData = {
        displayRows: this.lines,
        filterId: this.filterId,
        fields: this.chooseFields
      }
    } else {
      sendData = {
        fields: this.chooseFields
      }
    }
    this.$emit('saveFilter', sendData) // 外抛事件
  }

  private handleSearch (val) { // 搜索
    if (val) { // 搜索值存在过滤符合条件的搜索项
      const searchField: any = []
      this.getCusAllFields.map(item => {
        if (item.name.indexOf(val) > -1) {
          searchField.push(item)
        }
      })
      this.querySearchArr = deepClone(searchField)
    } else { // 清空搜索项展示全部
      this.querySearchArr = deepClone(this.getCusAllFields)
    }
  }

  private chooseChange (check: boolean, val: any) { // 选中数据/取消选中
    if (['mobile', 'qq', 'wechat', 'email'].includes(val.field) && this.newCus) { // 客户模块特殊处理
      val.type = 'text'
    }
    if (check) { // 未选中=>选中 数据push到chooseFields
      this.chooseFields.push(val)
    } else { // 选中=>未选中 chooseFields删除数据
      const index = this.chooseFields.findIndex(item => val.field === item.field)
      this.chooseFields.splice(index, 1)
    }
  }

  private addSearch () { // 外层页面打开自定义搜索
    this.dialogVisible = true
    this.querySearchArr = this.getCusAllFields
    this.chooseFields = deepClone(this.chooseData)
    // 处理已选回显
    this.querySearchArr.map(i => {
      i.check = false
      this.chooseFields.map(v => {
        if (i.field === v.field) {
          i.check = true
        }
      })
    })
  }

  private cancel () {
    this.dialogVisible = false
  }
}
</script>
<style lang="stylus" scoped>
.custom-filter
  width 70px
  height 32px
  margin 0 10px 16px 0
  border 1px solid #E7E9ED
  border-radius 4px
  font-size 12px
  color #303854
  cursor pointer
  display flex
  align-items center
  justify-content center
  i
    margin-right 5px
  .box
    width 452px
    height 360px
    border 1px solid #E7E9ED
    border-radius 4px
    display flex
    .left
      width 170px
      height 100%
      padding 10px
      border-right 1px solid #E7E9ED
      .field
        margin-top 10px
    .right
      flex 1
      height 100%
      .choose-field
        display flex
        align-items center
        margin 0 14px 20px
        .move
          i
            color #b3b9c7
            font-size 12px
            margin-right 16px
        .label
          font-size 12px
      .lines
        height 52px
        padding 10px
        border-bottom 1px solid #E7E9ED
        display flex
        align-items center
        font-size 12px
        margin-bottom 16px
        >>> .el-select
          width 60px !important
          height 32px
          margin 0 12px
  .operation
    width 100%
    text-align right
    margin-top 24px
    .el-button
      width 60px
      height 32px
</style>
